import React, { useEffect, useState, useContext, useMemo } from 'react';
import { useParams } from 'react-router-dom';
import moment from 'moment';
import { Button, Col, Row, Tag, Spin } from 'antd';
import { useTranslation } from 'react-i18next';

import WinningRateModal from '../WinningRateModal';

import { getMarkDetail } from '@src/services/market';
import { tenderState } from '@src/consts/publicData';
import { PublicDataStore } from '@src/store/PublicData/Provider';

import styles from './styles.module.less';

const MarketDetails = () => {
  const { t } = useTranslation();
  const params = useParams();
  const { state } = useContext(PublicDataStore);

  const [winningRateVisible, setWinningRateVisible] = useState(false);
  const [getDetailLoading, setGetDetailLoading] = useState(false);
  const [marketDetailData, setMarketDetailData] = useState({});

  useEffect(() => {
    onLoad();
  }, [])

  const onLoad = async () => {
    setGetDetailLoading(true);
    const res = await getMarkDetail({
      id: params.id
    });

    if (!res) return;
    setMarketDetailData(res);
    setGetDetailLoading(false);
  };

  const sourceAndDestinationCity = useMemo(() => {
    if (!marketDetailData.destination && !marketDetailData.source) return;

    let obj = {
      source: {},
      destination: {}
    };

    state.city.forEach(item => {
      if (item.city_id === marketDetailData.source) {
        obj.source = {
          ...item
        }
      }

      if (item.city_id === marketDetailData.destination) {
        obj.destination = {
          ...item
        }
      }
    })

    return obj
  }, [state.city, marketDetailData])

  return (
    <Spin spinning={getDetailLoading}>
      <div className={styles.market_details_box}>
        <div className={styles.content}>
          <div className={styles.title}>
            {marketDetailData?.title}
          </div>
          <div className={styles.bidding}>
            <Button type='primary'>{t(tenderState[marketDetailData?.state])}</Button>
          </div>
          <ul className={styles.info}>
            <li>
              <Row>
                <Col span={12}>
                  <span className={styles.label_box}>{t('Creation time')}：</span>
                  <span>{moment(marketDetailData?.create_time)?.format('YYYY-MM-DD')}</span>
                </Col>
                <Col span={12}>
                  <span className={styles.label_box}>{t('Deadline')}：</span>
                  <span>{moment(marketDetailData?.expiration_date)?.format('YYYY-MM-DD')}</span>
                </Col>
              </Row>

            </li>
            <li>
              <Row>
                <Col span={12}>
                  <span className={styles.label_box}>{t('Credit Rating')}：</span>
                  <span style={{ color: 'green' }}>90</span>
                </Col>
                <Col span={12}>
                  <span className={styles.label_box}>{t('Market')}：</span>
                  <span className={styles.value_box}>{marketDetailData?.marketing || ''}</span>
                </Col>
              </Row>
            </li>
            <li>
              <Row>
                <Col span={12}>
                  {console.log(marketDetailData)}
                  <span className={styles.label_box}>{t('Source')}：</span>
                  <span className={styles.value_box}>{sourceAndDestinationCity?.source?.[sessionStorage.getItem('ai_lang')]}</span>
                </Col>
                <Col span={12}>
                  <span className={styles.label_box}>{t('Destination')}：</span>
                  <span className={styles.value_box}>{sourceAndDestinationCity?.destination?.[sessionStorage.getItem('ai_lang')]}</span>
                </Col>
              </Row>
            </li>
            <li>
              <Row>
                <Col span={12}>
                  <span className={styles.label_box}>{t('Cooperation period')}：</span>
                  <span className={styles.value_box}>{marketDetailData?.contract ? `${marketDetailData?.contract}个月` : ''}</span>
                </Col>
                <Col span={12}>
                  <span className={styles.label_box}>{t('Bandwidth')}：</span>
                  <span className={styles.value_box}>{marketDetailData?.bandwidth ? `${marketDetailData?.bandwidth} M` : ''}</span>
                </Col>
              </Row>
            </li>
            <li>
              <span className={styles.label_box}>{t('Serve')}：</span>
              <span className={styles.value_box}>
                <Tag color="#7666ff">{state.allBusiness?.find(_business => _business.business_id === marketDetailData?.business_id)?.business_name || ''}</Tag>
              </span>
            </li>
          </ul>
          <div className={styles.split} />
          <div className={styles.description_box}>
            <div className={styles.description_title}>
              <span className={styles.decorate}></span>
              <span>{t('Specific requirements')}</span>
            </div>
            <div className={styles.description_content}>
              {marketDetailData?.description}
            </div>
          </div>

          <div className={styles.attachment_box}>
            <div className={styles.attachmentn_title}>
              <span className={styles.decorate}></span>
              <span>{t('Attachment')}</span>
            </div>
            <div className={styles.attachment_content}>
              {
                marketDetailData?.attachments?.map((item, index) => (
                  <p key={index}>
                    <a
                      className={styles.little_content}
                      href={`${process.env.APISERVER}${item}`}
                      // download={item?.split('/')?.slice(-1)[0]}
                      download={t('Download')}
                      style={{ color: 'blue' }}
                      target="_blank"
                    >
                      {item?.split('/')?.slice(-1)[0]}
                    </a>
                  </p>
                ))
              }
            </div>
          </div>
          <div className={styles.split} />
          <div className={styles.footer_box}>
            <Button type='primary' onClick={() => setWinningRateVisible(true)}>{t('Participate in bidding')}</Button>
          </div>
        </div>
        <div className={styles.content}>
          <div className={styles.registered_box}>
            <div className={styles.registered_title}>
              {t('Companies that have bid')}
            </div>
            <div className={styles.split} />
            <ul className={styles.list_box}>
              {
                !marketDetailData?.bid?.length && (
                  t('No bidding companies currently available')
                )
              }
              {
                marketDetailData?.bid?.map((item, index) => (
                  <li key={index}>
                    <img src={item.comapny.logo_path} alt='' />
                    <span>{item.comapny.company_name}</span>
                  </li>
                ))
              }
              {[...Array(6)].map((_, idx) => (
                <i key={idx} />
              ))}
            </ul>
          </div>
        </div>

        <div className={styles.statistics_box}>
          <img src='/img/coresite-amt-logo-1.png' alt='' />
          <div className={styles.data}>
            <div>PBS.com</div>
            <div>Data Completeness：80%</div>
            <div>Platform Certification：YES</div>
          </div>
          <div className={styles.split} />
          <div className={styles.count_box}>
            <div>
              <span className={styles.number}>10</span>
              <span>Total Publications</span>
            </div>
            <div>
              <span className={styles.number}>5</span>
              <span>Eval. Count</span>
            </div>
          </div>
        </div>
        <WinningRateModal winningRateVisible={winningRateVisible} setWinningRateVisible={setWinningRateVisible} />
      </div>
    </Spin>
  )
};

export default MarketDetails;